<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>库存明细表</title>
        <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
        <link rel="stylesheet" href="../../css/public.css" media="all">
        <style>
            .layui-table-body{
                background: white;
            }
        </style>
    </head>
    <body>
        <!-- 搜索功能栏 -->
        <form class="layui-form" id="searchInventoryReceipts">
            <div class="layui-panel" style="padding-top: 20px;margin: 5px 0;">
                <div class="layui-form-item layui-font-black ">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">商品名称：</label>
                        <input class="layui-input" value="牙周宁" name="inveDescName" style="color:red;border: none; width: 300px" readonly />
                        <input type="hidden" name="proId">
                    </div>
                    <div class="layui-col-md6">
                        <label class="layui-form-label" style="padding-left:50px">单据筛选：</label>
                        <div class="layui-input-inline">
                            <select name="documentsScreening" id="documentsScreening" lay-filter="documentsScreening">
                                <option value="">所有单据</option>
                                <option value="BS">商品报损</option>
                                <option value="BY">商品报溢</option>
                                <option value="DB">商品调拨</option>
                                <option value="PD">库存盘点</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-font-black ">
                    <div class="layui-inline">
                        <label class="layui-form-label">查询日期：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="startChangeDate" id="startChangeDate" autocomplete="off" class="layui-input">
                        </div>
                        <div style="display: inline-block;float: left;padding: 10px 13px 0 0;">至</div>
                        <div class="layui-input-inline">
                            <input type="text" name="stopChangeDate" id="stopChangeDate" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所在仓库：</label>
                        <div class="layui-input-inline">
                            <select name="inveDescDepot" id="inveDescDepot" lay-filter="inveDescDepot">
                                <option value="">所有仓库</option>
                            </select>
                        </div>
                    </div>
                    <!-- 搜索按钮 -->
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-searchInventoryReceipts-btn">
                            <i class="layui-icon">&#xe615;</i> 查 询
                        </button>
                    </div>
                </div>
            </div>
        </form>
        <!-- 库存商品单据表 -->
        <table class="layui-hide" id="comReceiptsTable" lay-filter="comSummaryTable"></table>

        <fieldset class="table-search-fieldset" style="margin-top: 20px;border: 1px solid lightgray;">
            <legend style="font-size: 17px;color: dimgray;">仓库库存明细：
            </legend>
            <!-- 仓库库存明细表 -->
            <table class="layui-hide" id="inventoryDetailTable" lay-filter="proBatchInfo"></table>
        </fieldset>
        <script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
        <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
        <script>
            layui.use(['form', 'table', 'layer', 'laydate','tableSelect'], function() {
                var $ = layui.jquery,
                    form = layui.form,
                    table = layui.table,
                    layer = layui.layer,
                    laydate = layui.laydate;

                //日历控件
                laydate.render({
                    elem: "#startChangeDate",
                    value: new Date(new Date().setDate(1))
                });

                laydate.render({
                    elem: "#stopChangeDate",
                    value: new Date()
                });

                //获取商品信息(String对象 --> JSON格式的对象)
                var comData = JSON.parse(parent.comData);

                //动态为商品ID赋值
                $("input[name = 'proId']").val(comData.proId);

                if(parent.isInventDescTable){
                    //动态为商品名称赋值
                    $("input[name = 'inveDescName']").val(comData.inveDescName);
                }else {
                    $("input[name = 'inveDescName']").val(comData.invTurnProName);
                }

                //将仓库信息赋值给下拉框
                $.ajax({
                    url: '/searchDepotInfoProcess',
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        $.each(data, function (index, item) {
                            // 下拉菜单里添加元素
                            $('#inveDescDepot').append(new Option(item.depotName,item.depotId));
                        });
                        //重新渲染 固定写法
                        layui.form.render("select");
                    }
                });

                //重载单据详情表和仓库库存明细表函数
                function reloadReceipts() {
                    //序列化库存单据表单信息
                    var inventoryReceipts = $('#searchInventoryReceipts').serialize();
                    //执行单据详情表重载
                    table.reload('comReceiptsTable',{
                        url:'/searchInventoryReceiptsDesc?'+inventoryReceipts
                    },'data');
                    //执行仓库库存明细表重载
                    table.reload('inventoryDetailTable',{
                        url: '/searchInventoryDepotDesc?'+inventoryReceipts
                    },'data');
                }

                //监听仓库下拉列表
                form.on('select(inveDescDepot)',function () {
                    reloadReceipts();
                });

                //监听单据筛选下拉列表
                form.on('select(documentsScreening)',function () {
                    reloadReceipts();
                });

                //监听库存商品单据查询操作
                form.on('submit(data-searchInventoryReceipts-btn)',function () {
                    reloadReceipts();
                });

                //序列化库存单据表单信息
                var inventoryReceipts = $('#searchInventoryReceipts').serialize();
                //库存商品单据表
                table.render({
                    elem: '#comReceiptsTable',
                    url:'/searchInventoryReceiptsDesc?'+inventoryReceipts,
                    height:275,
                    totalRow: true,
                    cols: [[
                        {field: 'documentDate', width: 120, title: '日期', sort: true, fixed:'left',align: "center", totalRowText: '合计:',
                            templet:"<div>{{layui.util.toDateString(d.documentDate, 'yyyy-MM-dd')}}</div>"},
                        {field: 'documentNr', minWidth: 120, title: '单据号',align: "center"},
                        {field: 'explain', width: 230, title: '说明', sort: true, align: "center"},
                        {field: 'inWarehouseNum', title: '入库数', width: 110, sort: true, align: "center", totalRow: true},
                        {field: 'outWarehouseNum', width: 100, title: '出库数', sort: true, align: "center", totalRow: true},
                        {field: 'warehouse', width: 100, title: '仓库', align: "center"},
                        {field: 'agent', width: 100, title: '经办人', align: "center"},
                        {field: 'operator', width: 100, title: '操作员', align: "center"}
                    ]],
                    page: false
                });

                //仓库库存明细表
                table.render({
                    elem: '#inventoryDetailTable',
                    url: '/searchInventoryDepotDesc?'+inventoryReceipts,
                    totalRow: true,
                    cols: [[
                        {field: 'proId', width: 120, title: '商品编号', sort: true, fixed:'left',align: "center", totalRowText: '合计:'},
                        {field: 'inveDescName', minWidth: 100, title: '商品名称',align: "center"},
                        {field: 'inveDescDepot', width: 120, title: '所在仓库', align: "center"},
                        {field: 'inveDescInventoryNum', width: 110, title: '当前库存', sort: true, align: "center", totalRow: true},
                        {field: 'inveDescUnit', title: '单位', width: 110, align: "center"},
                        {field: 'inveDescSize', width: 120, title: '规格型号', align: "center"},
                        {field: 'inveDescPostil', width: 120, title: '批准文号', align: "center"}
                    ]],
                    page: false
                });
            });
        </script>
    </body>
</html>